import React, {Component} from 'react';
import commonConfig from "../../../static/js/commonConfig";
import Iconfont from "../../../utils/iconfont";
import Viewer from 'react-viewer'
import '../../../static/scss/fileViewer/component/imageComponent.scss'

class ImageComponent extends Component {
    constructor(props) {
        super(props);
        this.state = {
            viewerVisible: false,
            imgList: [],
            activeIndex: 0
        }
    }

    /*预览图片*/
    showImage = index => {
        let {imageList} = this.props;
        let imgList = [];
        for (let i = 0; i < imageList.length; i++) {
            imgList.push({
                src: commonConfig.downloadFile(imageList[i]),
                alt: imageList[i].name
            })
        }
        this.setState({
            viewerVisible: true,
            imgList,
            activeIndex: index
        });
    }

    render() {
        const {viewerVisible, imgList, activeIndex} = this.state;
        const {imageList} = this.props;
        const viewerProps = {
            visible: viewerVisible,
            images: imgList,
            activeIndex,
            onClose: () => {
                this.setState({viewerVisible: false});
            }
        }
        return (
            <>
                <div className="image_component_module">
                    <ul className="clearFix">
                        {imageList.map((item, i) =>
                            <li key={i} className="float-left"
                                onClick={this.showImage.bind(this, i)}>
                                    <img src={commonConfig.previewImgFile(item)} alt=""/>
                                    <div className="shadow_img">
                                        <div>
                                            <Iconfont type="icon-chakan2"/>
                                            <p>查看</p>
                                        </div>
                                    </div>
                            </li>
                        )}
                    </ul>
                    <Viewer {...viewerProps}/>
                </div>
            </>
        )
    }
}

export default ImageComponent